<template>
      <div class="useratt hotword" id="attitude" style="height:400px"></div>
</template>
<script>
 import echarts from 'echarts'
export default {
  data(){
    return{
       chart: null,
    }
  },
  created:function(){
    this.$nextTick(() => {
      this.drawPie('attitude')
    })
  },
  methods:{
    drawPie(id){
      this.chart = echarts.init(document.getElementById(id))
      this.chart.setOption({
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                show: false,
                y : 'bottom',
                data:['rose1','rose2','rose3']
            },
            calculable : true,
            series : [
                {
                    name:'半径模式',
                    type:'pie',
                    radius : [20, 50],
                    center : ['25%', '50%'],
                    roseType : 'radius',
                    data:[
                        {value:10, name:'rose1'},
                        {value:5, name:'rose2'},
                        {value:15, name:'rose3'}
                    ]
                },
                {
                    name:'面积模式',
                    type:'pie',
                    radius : [30, 60],
                    center : ['75%', '50%'],
                    roseType : 'area',
                    data:[
                        {value:10, name:'rose1'},
                        {value:5, name:'rose2'},
                        {value:15, name:'rose3'}
                    ]
                }
            ]

      })
    }
  }
}
</script>
<style>
.hotword{width:90%;height:400px;}
.useratt{margin-top:0px}
</style>